<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="openBtn">打开图片</button>
  <button id="saveBtn">保存文件</button>
  <button id="messageBtn">消息对话框</button>
  <img id="images" alt="">
  <script>
    const { dialog } = require('@electron/remote');
    const fs = require('fs')
    const openBtn = document.getElementById('openBtn')
    const saveBtn = document.getElementById('saveBtn')
    const messageBtn = document.getElementById('messageBtn')
    
    openBtn.onclick = () => {
      dialog.showOpenDialog({
        title: '请选择',
        defaultPath: 'xxx.jpg',
        filters: [
          {name: 'img', extensions: ['jpg']}
        ],
        buttonLabel: '自定义打开按钮'
      }).then(result => {
        let image = document.getElementById('images')
        image.src = result.filePaths[0]
        // image.setAttribute('src', result.filePaths[0])
      }).catch(error => {
        console.log(error)
      })
    }

    saveBtn.onclick = () => {
      dialog.showSaveDialog({
        title: '保存文件',
      }).then(result => {
        console.log(result.filePath)
        fs.writeFileSync(result.filePath, '保存的内容')
      }).catch(error => {
        console.log(error)
      })
    }

    messageBtn.onclick = () => {
      dialog.showMessageBox({
        tyle: 'warning',
        title: '好好学习',
        message: '今天学习了吗？',
        buttons: ['学了', '没学']
      }).then(result => {
        console.log(result.response) // 0  1
      }).catch(error => {

      })
    }
  </script>
</body>
</html>